<template>
  <div style="min-height: 100vh;">
    <el-container>
      <el-aside width="300px">
        <el-col :span="24">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="min-height: 100vh;"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#daa877"
          >
            <el-menu-item class="logo_title">
              <i
                class="el-icon-medal"
                style="color: #cc945c; font-size: 28px"
              ></i>
              <span>泸宝酒</span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>列表管理</span>
              </template>
              <el-menu-item-group>
                <router-link
                  :to="{ name: 'productList', params: { url: 'productList' } }"
                  ><el-menu-item index="2-1"
                    >商品列表</el-menu-item
                  ></router-link
                >
                <router-link
                  :to="{ name: 'categoryList', params: { url: 'categoryList' } }"
                  ><el-menu-item index="2-2"
                    >分类管理</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="3">
              <i class="el-icon-s-custom"></i>
              <span slot="title">会员状况</span>
            </el-menu-item>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-film"></i>
                <span>首页产品</span>
              </template>
              <el-menu-item-group>
                <router-link
                  :to="{ name: 'slideshow', params: { url: 'slideshow' } }"
                  ><el-menu-item index="4-1"
                    >轮播商品</el-menu-item
                  ></router-link
                >
                <router-link
                  :to="{ name: 'recommend', params: { url: 'recommend' } }"
                  ><el-menu-item index="4-2"
                    >推荐产品</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="5">
              <i class="el-icon-s-marketing"></i>
              <span slot="title"
                >销量排行<router-link
                  :to="{ name: 'marketing', params: { url: 'marketing' } }"
                  ><el-menu-item>销量排行</el-menu-item></router-link
                ></span
              >
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header>
          <!--头部-->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="/">列表管理</a>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="headerUser">
            <p class="user">
              <span class="welcome">欢迎，</span>
              <span class="welcomeUser">{{ user }}</span>
            </p>

            <el-button
              type="text"
              :underline="false"
              @click="eixt"
              class="userIcon"
              ><i
                class="el-icon-s-tools"
                style="color: #cc945c; font-size: 24px"
              ></i
            ></el-button>
          </div>
        </el-header>
        <el-main>
          <!--内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      user: "",
      levelList: [], //面包屑
    };
  },

  components: {},
  methods: {
    // getBreadcrumb(_to, _from) {
    //   //面包屑方法
    //   let matched = this.$route.matched.filter((item) => item.name);
    //   this.levelList.push(matched[1].name);
    // },
    breadcumbFn(state, option) {
      state.breadcumb = option;
      console.log(state);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    eixt() {
      this.$confirm("你将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("user");
          this.$router.push({ path: "/login" });
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
  watch: {
    $route(to, from) {
      //面包屑监听
      let newRouter = to.name;
      // this.getBreadcrumb()
    },
  },
  mounted() {
    this.user = localStorage.getItem("user");
  },
};
</script>

<style scoped>
.el-header {
  color: #333;
  text-align: center;
  text-align: right;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #cc945c;
}
.el-header .el-breadcrumb {
  font-size: 14px;
  line-height: 60px;
}
.el-col-24 {
    width: 100% !important;
    height: 100% !important;
}
.el-header .el-dropdown {
  font-size: 18px;
  line-height: 60px;
}
.logo_title {
  text-align: center;
  background-color: #804c1a;
  border-bottom: 2px solid #cc945c;
  box-sizing: border-box;
  height: 60px;
}
.logo_title span {
  color: #cc945c;
  font-size: 24px;
  font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’,
    ‘Lucida Sans’, Arial, sans-serif;
  text-align: center;
}
.el-menu-vertical-demo {
  height: 100%;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  height: 100%;
  margin-bottom: 40px;
}
.headerUser {
  display: flex;
}
.headerUser .user {
  margin-right: 30px;
  display: flex;
  justify-content: space-between;
}
.user .welcome,
.user .welcomeUser {
  display: flex;
  font-size: 16px;
  justify-content: center;
  align-items: center;
}
.userIcon i {
  font-weight: 600;
}
</style>
